<script setup>
import { ref, watch } from 'vue'
import UploadFile from '@/components/UploadFile/UploadFile.vue'
import { message } from 'ant-design-vue'

import api from '@/api/index.js'

const emits = defineEmits(['close', 'reload'])
const props = defineProps({
  subtitle: {
    type: String,
    default: ''
  },
  faMenuSltOpt: {
    type: Object,
    default: () => ({})
  },
  months: {
    type: Array,
    default: () => []
  },
  productData: {
    type: Array,
    default: () => []
  },
  keyaddress: {
    type: Array,
    default: () => []
  },
  plantData: {
    type: Array,
    default: () => []
  }
})

//关闭弹出层
const close = () => {
  show.value = false
  productData.value = props.productData
  keySaleData.value = props.keyaddress
  plantData.value = props.plantData
  formData.value = props.faMenuSltOpt
}

// 表单数据
const formData = ref([
  //简介
  {
    numPic: '',
    numtext: ''
  },

  //资产统计
  {
    tjtext1: '',
    tjtext2: '',
    tjtext3: '',
    tjtext4: '',
    tjtext5: '',
    tjtext6: ''
  },

  //销售统计
  {
    tjnum1: '',
    tjnum2: '',
    tjnum3: '',
    tjnum4: '',
    tjnum5: '',
    tjnum6: ''
  },
  {
    xs: '',
    tb: '',
    hb: ''
  },
  {
    xsnum: '',
    tbnum: '',
    hbnum: ''
  },

  //月销售前五产品
  {
    cp1: '',
    cp2: '',
    cp3: '',
    cp4: '',
    cp5: ''
  },
  {
    cpnum1: '',
    cpnum2: '',
    cpnum3: '',
    cpnum4: '',
    cpnum5: ''
  },

  //合作社简介
  {
    blurb: ''
  },

  //农机数量统计
  {
    nj1: '',
    nj2: '',
    nj3: '',
    nj4: '',
    nj5: ''
  },
  {
    njnum1: '',
    njnum2: '',
    njnum3: '',
    njnum4: '',
    njnum5: ''
  },

  //耕作时长统计
  {
    njTIme: '',
    njtb: '',
    njhb: ''
  },
  {
    njTImeNumber: '',
    njTbNumber: '',
    njHbNumber: ''
  },

  //农机服务金额
  {
    yj: '',
    sj: ''
  },
  {
    yjnum: '',
    sjnum: ''
  },

  //作物监管
  {
    fy: '',
    jd: '',
    sf: ''
  },
  {
    fynum: '',
    jdnum: '',
    sfnum: ''
  },

  //销售金额统计
  {
    xsprice1: '',
    xsprice2: '',
    xsprice3: '',
    xsprice4: '',
    xsprice5: '',
    xsprice6: '',
    xsprice7: '',
    xsprice8: '',
    xsprice9: '',
    xsprice10: '',
    xsprice11: '',
    xsprice12: ''
  },
  {
    keyaddres1: '',
    keyaddres2: '',
    keyaddres3: '',
    keyaddres4: '',
    keyaddres5: '',
    keyprice1: '',
    keyprice2: '',
    keyprice3: '',
    keyprice4: '',
    keyprice5: ''
  },
  //预计产量统计
  {
    yjnum: '',
    yjprice: ''
  }
])

const productData = ref([])
const keySaleData = ref([])
//重点销售区域数据
const plantData = ref([])

// 同步表格数据到表单数据内
watch(
  () => props.faMenuSltOpt,
  (val) => {
    formData.value = { ...formData.value, ...val }
  },
  { deep: true, immediate: true }
)
watch(
  () => props.productData,
  (val) => {
    const str = JSON.stringify(val)
    productData.value = JSON.parse(str)
  },
  { deep: true, immediate: true }
)
watch(
  () => props.keyaddress,
  (val) => {
    const str = JSON.stringify(val)
    keySaleData.value = JSON.parse(str)
  },
  { deep: true, immediate: true }
)
watch(
  () => props.plantData,
  (val) => {
    const str = JSON.stringify(val)
    plantData.value = JSON.parse(str)
  }
)

// 是否显示弹窗
const show = ref(false)

// 提交按钮loading状态
const submitLoading = ref(false)

// 打开弹窗
const open = () => {
  show.value = true
}
// 表单节点
const formRef = ref()
const dataRef = ref()
const keyData = ref()
const plantRef = ref()

//提交销售统计表单
const productSubmit = async () => {
  try {
    submitLoading.value = true
    await api.editDpList({ configId: 2, configInfo: JSON.stringify(productData.value) })
    submitLoading.value = false
    show.value = false
    message.success('提交成功')
    emits('close')
    emits('reload')
  } catch (error) {
    submitLoading.value = false
    message.error('提交失败')
  }
}

const submit = async () => {
  try {
    submitLoading.value = true
    await api.editDpList({ configId: 1, configInfo: JSON.stringify(formData.value) })
    submitLoading.value = false
    show.value = false
    message.success('提交成功')
    emits('close')
    emits('reload')
  } catch (error) {
    submitLoading.value = false
    message.error('提交失败')
  }
}

//提交重点销售区域
const keySaleSubmit = async () => {
  try {
    submitLoading.value = true
    await api.editDpList({ configId: 3, configInfo: JSON.stringify(keySaleData.value) })
    submitLoading.value = false
    show.value = false
    message.success('提交成功')
    emits('close')
    emits('reload')
  } catch (error) {
    submitLoading.value = false
    message.error('提交失败')
  }
}

//提交种植面积
const plantSubmit = async () => {
  try {
    submitLoading.value = true
    console.log(plantData.value)

    await api.editDpList({ configId: 4, configInfo: JSON.stringify(plantData.value) })
    submitLoading.value = false
    show.value = false
    message.success('提交成功')
    emits('close')
    emits('reload')
  } catch {
    submitLoading.value = false
    message.error('提交失败')
  }
}

//删除销售统计表单
const removeDomain = (index) => {
  if (productData.value.length > 1) {
    productData.value.splice(index, 1)
  } else {
    message.warning('至少需要一个输入框')
  }
}
//新增重点销售区域表单
const addKey = () => {
  keySaleData.value.push({ area: '', amount: '' })
}
//新增销售统计表单
const addDomain = () => {
  productData.value.push({ product: '', Amount: '', volume: '' })
}
//新增种植面积
const addPlant = () => {
  plantData.value.push({ plantType: '', area: '' })
}

//删除重点销售区域表单
const removeKey = (index) => {
  if (keySaleData.value.length > 1) {
    keySaleData.value.splice(index, 1)
  } else {
    message.warning('至少需要一个输入框')
  }
}
//删除种植面积
const removePlantType = (index) => {
  if (plantData.value.length > 1) {
    plantData.value.splice(index, 1)
  } else {
    message.warning('至少需要一个输入框')
  }
}

//删除种植面积表单
const removePlant = (index) => {}

//重点销售区域选择
const area = ref([
  '黑龙江',
  '内蒙古',
  '吉林',
  '北京市',
  '辽宁',
  '河北',
  '天津',
  '山西',
  '陕西',
  '甘肃',
  '宁夏',
  '青海',
  '新疆',
  '西藏',
  '四川',
  '重庆',
  '山东',
  '河南',
  '江苏',
  '安徽',
  '湖北',
  '浙江',
  '福建',
  '江西',
  '湖南',
  '贵州',
  '云南',
  '广东',
  '广西',
  '海南',
  '上海'
])
defineExpose({ open })
</script>

<template>
  <a-drawer
    :maskClosable="false"
    :closable="false"
    destroyOnClose
    v-model:open="show"
    class="custom-class"
    root-class-name="root-class-name"
    :title="props.subtitle"
    placement="right"
    @after-open-change="afterOpenChange"
  >
    <!-- //数字营销 -->
    <a-form
      v-if="props.subtitle === '简介'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item label="图片" :rules="[{ required: true, message: '请上传' }]">
        <a-form-item-rest>
          <UploadFile v-model="formData.numPic" :limit="1" />
        </a-form-item-rest>
      </a-form-item>
      <a-form-item label="内容">
        <a-textarea v-model:value="formData.numtext" :rows="8" />
      </a-form-item>
    </a-form>

    <!-- 数字大屏 -->
    <a-form
      v-if="props.subtitle === '资产统计'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.tjtext1" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tjtext1" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.tjnum1" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.tjtext2" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tjtext2" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.tjnum2" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.tjtext3" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tjtext3" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.tjnum3" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.tjtext4" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tjtext4" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.tjnum4" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.tjtext5" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tjtext5" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.tjnum5" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.tjtext6" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tjtext6" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.tjnum6" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 销售金额 -->
    <a-form
      v-if="props.subtitle === '销售统计'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.xs" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.xs" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number
              v-model:value="formData.xsnum"
              allowClear
              style="width: 100%"
              addon-after="元"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.tb" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.tb" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number
              v-model:value="formData.tbnum"
              allowClear
              style="width: 100%"
              addon-after="%"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.hb" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.hb" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number
              v-model:value="formData.hbnum"
              allowClear
              style="width: 100%"
              addon-after="%"
            />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 销售统计图表 -->
    <a-form
      v-if="props.subtitle === '销售统计图表'"
      ref="dataRef"
      :model="productData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item
        v-for="(item, index) in productData"
        :label="item.product"
        :rules="[{ required: true, message: '请输入' }]"
      >
        <a-row gutter="8">
          <a-col span="7">
            <a-input v-model:value="item.product" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="item.Amount" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="item.volume" allowClear style="width: 100%" />
          </a-col>
          <a-col span="2">
            <a-button type="dashed" @click="removeDomain(index)">删除</a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-button type="dashed" style="width: 100%" @click="addDomain"> 增加产品 </a-button>
      </a-form-item>
    </a-form>

    <!-- 销售金额统计 -->
    <a-form
      v-if="props.subtitle === '销售金额统计'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="props.months[0]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[0]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice1" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[1]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[1]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice2" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[2]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[2]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice3" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[3]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[3]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice4" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[4]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[4]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice5" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[5]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[5]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice6" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[6]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[6]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice7" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[7]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[7]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice8" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[8]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[8]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice9" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[9]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[9]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice10" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[10]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[10]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice11" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="props.months[11]" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input disabled v-model:value="props.months[11]" allowClear style="width: 100%" />
          </a-col>
          <a-col span="6">
            <a-input-number v-model:value="formData.xsprice12" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 月销售前五产品 -->
    <a-form
      v-if="props.subtitle === '月销售前五产品'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.cp1" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.cp1" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.cpnum1"
              allowClear
              style="width: 100%"
              addon-after="元"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.cp2" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.cp2" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.cpnum2"
              allowClear
              style="width: 100%"
              addon-after="元"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.cp3" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.cp3" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.cpnum3"
              allowClear
              style="width: 100%"
              addon-after="元"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.cp4" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.cp4" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.cpnum4"
              allowClear
              style="width: 100%"
              addon-after="元"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.cp5" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.cp5" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.cpnum5"
              allowClear
              style="width: 100%"
              addon-after="元"
            />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 合作社简介 -->
    <a-form
      v-if="props.subtitle === '合作社简介'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item label="合作社简介">
        <a-textarea v-model:value="formData.blurb" :rows="8" />
      </a-form-item>
    </a-form>

    <!-- 农机数量统计 -->
    <a-form
      v-if="props.subtitle === '农机数量统计'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.nj1" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.nj1" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.njnum1" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.nj2" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.nj2" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.njnum2" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.nj3" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.nj3" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.njnum3" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.nj4" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.nj4" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.njnum4" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 耕作时长统计 -->
    <a-form
      v-if="props.subtitle === '耕作时长统计'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.njTIme" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.njTIme" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.njTImeNumber"
              allowClear
              style="width: 100%"
              addon-after="小时"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.njtb" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.njtb" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.njTbNumber"
              allowClear
              style="width: 100%"
              addon-after="%"
            />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.njhb" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.njhb" allowClear style="width: 100%" />
          </a-col>
          <a-col span="10">
            <a-input-number
              v-model:value="formData.njHbNumber"
              allowClear
              style="width: 100%"
              addon-after="%"
            />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
    <!-- 农机服务金额 -->
    <a-form
      v-if="props.subtitle === '农机服务金额'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.yj" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.yj" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.yjnum" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.sj" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.sj" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input-number v-model:value="formData.sjnum" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 作物监管 -->
    <a-form
      v-if="props.subtitle === '作物产量指标'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item :label="formData.fy" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.fy" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input v-model:value="formData.fynum" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.jd" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.jd" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input v-model:value="formData.jdnum" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item :label="formData.sf" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.sf" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input v-model:value="formData.sfnum" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <!-- 重点销售区域 -->
    <a-form
      v-if="props.subtitle === '重点销售区域'"
      ref="keyData"
      :model="keySaleData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item
        v-for="(item, index) in keySaleData"
        :label="item.area"
        :rules="[{ required: true, message: '请输入' }]"
      >
        <a-row gutter="8">
          <a-col span="10">
            <a-select v-model:value="item.area">
              <a-select-option v-for="item in area" :key="item"></a-select-option>
            </a-select>
            <!-- <a-input v-model:value="item.area" allowClear style="width: 100%" /> -->
          </a-col>
          <a-col span="10">
            <a-input v-model:value="item.amount" allowClear style="width: 100%" />
          </a-col>
          <a-col span="4">
            <a-button type="dashed" @click="removeKey(index)">删除</a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-button type="dashed" style="width: 100%" @click="addKey"> 增加产品 </a-button>
      </a-form-item>
    </a-form>

    <!-- 种植面积 -->
    <a-form
      v-if="props.subtitle === '种植面积'"
      ref="plantRef"
      :model="plantData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item
        v-for="(item, index) in plantData"
        :label="item.plantType"
        :rules="[{ required: true, message: '请输入' }]"
      >
        <a-row gutter="8">
          <a-col span="10">
            <a-input v-model:value="item.plantType" allowClear style="width: 100%" />
            <!-- <a-input v-model:value="item.area" allowClear style="width: 100%" /> -->
          </a-col>
          <a-col span="10">
            <a-input v-model:value="item.area" allowClear style="width: 100%" />
          </a-col>
          <a-col span="4">
            <a-button type="dashed" @click="removePlantType(index)">删除</a-button>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item>
        <a-button type="dashed" style="width: 100%" @click="addPlant">增加</a-button>
      </a-form-item>
    </a-form>

    <!-- 预计产量统计 -->
    <a-form
      v-if="props.subtitle === '预计产量统计'"
      ref="formRef"
      :model="formData"
      layout="vertical"
      autocomplete="off"
      @finish="submit"
    >
      <a-form-item label="产量" :rules="[{ required: true, message: '请输入' }]">
        <a-row gutter="8">
          <a-col span="12">
            <a-input v-model:value="formData.yjnum" allowClear style="width: 100%" />
          </a-col>
          <a-col span="12">
            <a-input v-model:value="formData.yjprice" allowClear style="width: 100%" />
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>

    <template #footer>
      <div style="display: flex; gap: 5px">
        <a-button
          type="primary"
          html-type="submit"
          @click="productSubmit"
          :loading="submitLoading"
          v-if="props.subtitle === '销售统计图表'"
          >提交</a-button
        >
        <a-button
          type="primary"
          html-type="submit"
          @click="plantSubmit"
          :loading="submitLoading"
          v-if="props.subtitle === '种植面积'"
          >提交</a-button
        >
        <a-button
          type="primary"
          html-type="submit"
          @click="keySaleSubmit"
          :loading="submitLoading"
          v-if="props.subtitle === '重点销售区域'"
          >提交</a-button
        >
        <a-button
          type="primary"
          html-type="submit"
          @click="submit"
          :loading="submitLoading"
          v-if="
            props.subtitle !== '销售统计图表' &&
            props.subtitle !== '重点销售区域' &&
            props.subtitle !== '种植面积'
          "
          >提交</a-button
        >
        <a-button type="primary" ghost @click="close">取消</a-button>
      </div>
    </template>
  </a-drawer>
</template>
